/*	
Author:kermit
Email:455196886@qq.com
Company:http://dragontrail.com/
Creattime:2017-1-08
*/

/* 清除浏览器的默认样式开始 */
* { margin: 0; padding: 0; list-style: none; }
/* KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com> */
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ { margin: 0; padding: 0; }
/** 设置默认字体 **/
body, button, input, select, textarea /* for ie */ { font: 14px/1.5 tahoma, arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; }
/* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
/* 统一等宽字体 */
small { font-size: 12px; }
/* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: none; }
/** 重置表单元素 **/
legend { color: #000; }
/* for ie6 */
fieldset, img { border: 0; }
/* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; }
/* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
/* 清除浏览器的默认样式结束 */

//引入变量
@import "variable.less";

//引入混合函数
@import "mixins.less";

//引入基础样式
@import "base.less";


html,body{
	.full-box;
	min-height:100%;
}
html.un-scroll{
	overflow:hidden;
	body{overflow:hidden;}
}

select{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    padding-right:1em;
    background: url(../images/arrow.png) no-repeat scroll right center transparent;
    &::-ms-expand { display: none; }
}

@font-face {
	font-family: 'Conv_Oswald-Regular';
	src: url('../fonts/Oswald-Regular.eot');
	src: local('☺'), url('../fonts/Oswald-Regular.woff') format('woff'),
	url('../fonts/Oswald-Regular.ttf') format('truetype'),
	url('../fonts/Oswald-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.iconfont{line-height:1;}


//视频
.video-player{
	font-size:0;
	line-height:0;
	position:relative;
	cursor:pointer;
	&::after{
		content:'\f0da';
		padding:1.3em;
		display:block;
		background-color:#fff;
		color:#515151;
		position:absolute;
		font-family:'FontAwesome';
		top:50%;
		left:50%;
		width:1em;
		text-align:center;
		font-size:20px;
		.border-radius(50%);
		.translate3d(-50%,-50%,0);
	}
	&.video-player-noicon{
		&::after{display:none;}
	}
}

.video-container{
	position:relative;
	font-size:0;
	line-height:0;
	position:relative;
	cursor:pointer;
	&::after{
		content:'\f0da';
		padding:1.3em;
		display:block;
		background-color:#fff;
		color:#515151;
		position:absolute;
		font-family:'FontAwesome';
		top:50%;
		left:50%;
		width:1em;
		text-align:center;
		font-size:20px;
		.border-radius(50%);
		.translate3d(-50%,-50%,0);
	}
	&.playing{
		&::after{display:none;}
	}
}

//视频弹层
.video-cover{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:9999;
	.full-box;
	.cover-bg{
		.full-box;
		cursor:pointer;
		background-color:rgba(0, 0, 0, 0.5);
	}
	.btn.btn-close{
		border:0;
		padding:0.5em;
		font-size:20px;
		line-height:1;
		color:#fff;
		position:absolute;
		background-color:rgba(255, 255, 255, 0.1);
		top:0.5em;
		right:0.5em;
		width:2em;
		text-align:center;
		.border-radius(50%);
		&:hover{
			background-color:@red;
		}
	}
	.cover-box{
		width:100%;
		max-width:1200px;
		position:absolute;
		top:50%;
		left:50%;
		z-index:9;
		.translate3d(-50%,-50%,0);
		.cover-box-inner{
			position:relative;
			width:100%;
			.border-box;
			padding:50px;
			text-align:center;
			background:url(../images/loading.gif) no-repeat center center;
			background-size:40px 40px;
			video{
				max-width:100%;
			}
		}
	}
}

//图片链接
.img-link{
	font-size:0;
	line-height:0;
	display:inline-block;
}

//行里loading
.inline-loading{
	width:100%;
	text-align:center;
	@size:50px;
	font-size:0;
	line-height:0;
	padding:20px 0;
	.inline-loading-inner{display:inline-block;}
	.loading-img{
		width:@size;
	}
	.loading-text{
		padding-left:1em;
		font-size:14px;
		color:#666;
		line-height:@size;
	}
	@media screen and (max-width:1024px){
		@size:40px;
		.loading-img{width:@size;}
		.loading-text{line-height:@size;}
	}
	@media screen and (max-width:768px){
		@size:50*@rpx;
		padding:20*@rpx 0;
		.loading-img{width:@size;}
		.loading-text{line-height:@size; padding-right:0.5em;}
	}
}


//页面容器
.wrapper{
	width:100%;
	.border-box;
	&.wrapper-fixed{
		max-width:1170px;
		margin-left:auto;
		margin-right:auto;
		@media screen and (max-width:1270px){max-width:1270px; padding-left:50px; padding-right:50px;}
		@media screen and (max-width:1024px){padding-left:30px; padding-right:30px;}
		@media screen and (max-width:768px){padding-left:50*@rpx; padding-right:50*@rpx;}
		@media screen and (max-width:640px){padding-left:30*@rpx; padding-right:30*@rpx;}
	}
}


//页面内容
.page-content{
	padding-top:91px;
	@media screen and (max-width:1024px){padding-top:64px;}
	@media screen and (max-width:768px){padding-top:88*@rpx;}
}

//社交链接
.social-link{
	@iconWidth:30px;
	display:inline-block;
	width:@iconWidth;
	height:@iconWidth;
	line-height:@iconWidth;
	border:1px solid #4b4a49;
	//color:#4b4a49;
	text-align:center;
	.border-radius(50%);
	i{
		font-size:16px;
	}
	&.social-link-weibo{
		margin:0 5px;
	}
	&:hover{
		border-color:#fff;
		color:#fff;
		text-decoration:none;
	}
}
//微信
.wechat-box{
	@iconWidth:30px;
	display:inline-block;
	position:relative;
	.qrcode-box{
		@qrWidth:120px;
		display:none;
		position:absolute;
		width:@qrWidth;
		.box-sizing(border-box);
		margin-left:-@qrWidth/2;
		left:50%;
		bottom:@iconWidth+10px;
		line-height:0;
		font-size:0;
		padding:5px;
		z-index:9;
		background-color:#fff;
		&::before{
			@arrowWidth:8px;
			position:absolute;
			left:50%;
			bottom:-@arrowWidth*2;
			margin-left:-@arrowWidth;
			content:'';
			display:block;
			width:0;
			height:0;
			border:@arrowWidth solid transparent;
			border-top-color:#fff;
		}
	}
	&:hover{
		.qrcode-box{
			display:block;
		}
	}
	@media screen and (max-width:1024px){
		.social-link:hover{
			color:rgba(255, 255, 255, 0.5);
			border-color:#4b4a49;
		}
		&:hover{
			color:rgba(255, 255, 255, 0.5) !important;
			border-color:#4b4a49 !important;
			.qrcode-box{
				display:none;
			}
		}
		&.show-qrcode{
			.qrcode-box{
				display:block;
			}	
		}
	}
}

//404页面
.error-page{
	width:100%;
	height:100%;
	padding-bottom:181px;
	.error-page-inner{
		display:table;
		height:100%;
	}
	.error-content{
		display:table-cell;
		vertical-align:middle;
		.error-title{
			font-weight:normal;
			padding:80px 0;
			margin-bottom:40px;
			font-size:30px;
			background: url(../images/404bg.jpg) center center no-repeat;
			background-size:auto 100%;
		}
		.error-text{
			font-size:18px;
			color:#999;
			margin-bottom:0.5em;
		}
		.back-home{
			padding:0.3em 2em;
			display:inline-block;
			color:#fff;
			font-size:22px;
			background-color:@red;
			&:hover{
				background-color:darken(@red, 5%);
				text-decoration:none;
			}
		}
	}
	.footer-box{
		width:100%;
		position:absolute;
		left:0;
		bottom:0;
	}
	@media screen and (max-width:1024px){
		.error-content{
			.error-title{
				padding:60px 0;
				margin-bottom:30px;
				font-size:24px;
			}
			.error-text{font-size:16px;}
			.back-home{font-size:20px;}
		}
	}
	@media screen and (max-width:768px){
		padding-bottom:270px;
		.error-content{
			.error-title{
				padding:50px 0;
				margin-bottom:30px;
				font-size:20px;
			}
			.error-text{font-size:14px;}
			.back-home{font-size:18px;}
		}
	}
	@media screen and (max-width:640px){
		padding-bottom:230px;
	}
}

.content-btn{
	cursor:pointer;
}

//联系咨询弹层
.cover-content{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0, 0, 0, 0.5);
	padding:10px 50px;
	z-index:999;
	display:none;
	font-style:normal;
	&.cover-content-show{
		display:table;
	}
	.cover-content-inner{
		display:table-cell;
		vertical-align:middle;
		.cover-content-box{
			position:relative;
			width:100%;
			max-width:740px;
			margin:0 auto;
			background-color:#fff;
			padding:40px 50px;
			.border-radius(0.5em);
		}
	}
	.btn-close{
		border:0;
		background-color:transparent;
		padding:5px;
		font-size:0;
		line-height:1;
		color:#b2b2b2;
		i{width:1em; font-size:20px;}
		position:absolute;
		top:20px;
		right:20px;
		&:hover{color:#000;}
	}
	.content-header{
		font-size:16px;
		color:#333;
		.content-title{font-size:34px; font-weight:normal; line-height:1; padding-bottom:0.3em;}
	}
	.content-body{
		padding:24px 0;
		.input-group{
			@size:40px;
			font-size:16px;
			position:relative;
			padding-left:6em;	
			line-height:@size;
			width:100%;
			max-width:400px;
			margin:0 auto;
			margin-bottom:10px;
			.box-sizing('content-box');
			.input-lable{
				width:6em;
				position:absolute;
				top:0;
				left:0;
				i{font-style:normal; padding-right:0.3em;}
			}
			input,select{
				width:100%;
				padding:0.5em;
				.border-radius(0);
				border:1px  solid #e6e6e6;
			}		
		}
		.submit-box{padding-top:10px;}
		.submit-btn{
			padding:0.5em 4em;
			display:inline-block;
			background-color:@red;
			color:#fff;
			font-size:16px;
			border:0;
			&[disabled]{
				opacity:0.5;
			}
		}
	}
	.content-footer{
		font-size:16px;
		color:#7f7f7f;
		.phone{
			display:block;
			font-size:30px;
			color:#999999;	
			font-weight:bold;
			font-family: 'Conv_Oswald-Regular', 'Microsoft YaHei';
			&::before{
				content:"\e60d";
				line-height:1;
				display:inline-block;
				padding-right:0.3em;
				font-family: "iconfont" !important;
			}
			&:hover{
				text-decoration:none;
				color:darken(#7f7f7f, 10%);
			}
		}
	}
	@media screen and (max-width:1270px){
		.content-header{
			font-size:14px;
			.content-title{font-size:30px;}
		}
		.cover-content-inner{
			.cover-content-box{padding:30px 40px;}
		}
		.content-body{
			padding:20px 0;
			.input-group{
				@size:36px;
				font-size:14px;
				line-height:@size;
			}
		}
		.content-footer{
			font-size:14px;
			.phone{font-size:26px;}
		}
	}
	@media screen and (max-width:1024px){
		.content-header{
			.content-title{font-size:28px;}
		}
		.content-footer{
			.phone{font-size:20px;}
		}
	}
	@media screen and (max-width:768px){
		padding:20*@rpx 50*@rpx;
		.btn-close{
			top:20*@rpx;
			right:20*@rpx;
			i{font-size:16px;}
		}
		.cover-content-inner{
			.cover-content-box{padding:50*@rpx;}
		}
		.content-header{
			font-size:12px;
			.content-title{font-size:22px;}
			p{text-align:left;}
		}
		.content-body{
			padding:30*@rpx 0;
			.input-group{
				@size:36px;
				line-height:@size;
				margin-bottom:10*@rpx;
				input,select{
					padding:0.3em 0.5em;
				}
			}
			.submit-btn{
				font-size:14px;
				padding-left:3em;
				padding-right:3em;
			}
		}
		.content-footer{
			font-size:12px;
			.phone{font-size:16px;}
		}
	}
}


//图片放大效果
.zoom-box{
	display:block;
	overflow:hidden;
	img{.transition(all,0.5s,ease,0s);.transform-origin(center,center)}
	&:hover{
		img{.scale3d(1.05,1.05,1.05);}
	}
}

//分享二维码弹层
.share-cover{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:9999;
	background-color:rgba(0, 0, 0, 0.5);
	display:none;
	&.share-cover-show{
		display:table;
	}
	.share-cover-inner{
		display:table-cell;
		vertical-align:middle;
		text-align:center;
		.qrcode-content{
			display:inline-block;
			padding:20px;
			width:200px;
			margin-left:auto;
			margin-right:auto;
			background-color:#fff;
			.border-radius(5px);
			border:1px solid #d8d8d8;
			position:relative;
		}
	}
	.btn-close{
		position:absolute;
		top:-40px;
		right:-40px;
		border:0;
		padding:10px;
		background-color:transparent;
		color:#fff;
		i{font-size:20px;}
	}
}


//toast
.toast{
	position:fixed;
	top:50%;
	left:50%;
	padding:0.5em 1em;
	background-color:#fff;
	color:#333;
	font-size:20px;
	box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);
	z-index:9999;
	border:1px solid #ccc;
	.animation_delay(0.3s);
	.border-radius(0.3em);
	.translate3d(-50%,-50%,0);
	@media screen and (max-width: 768px){
		font-size:16px;
	}
}

//返回顶部
#gotop{
	position:fixed;
	z-index:88;
	right:30px;
	bottom:200px;
	border:0;
    color: rgba(204,204,204,.5);
    background-color:#b5b5b5;
    text-align: center;
    cursor: pointer;
    display: block;
    i{display:block; font-size:30px; line-height:1;}
    padding:10px;
    color:#fff;
    opacity:0;
    .transition(all,0.5s,ease,0s);
    &.gotop-show{
    	opacity:1;
    }
    &:hover{
    	color:#fff;
    	background-color:@red;
    }
    @media screen and (max-width: 768px){
    	right:30*@rpx;
    	bottom:230px;
    	i{font-size:20px;}
    }
}

/* 中等屏幕（桌面显示器，小于1366px） */
@media screen and (max-width:1366px){}
/* 中等屏幕（桌面显示器, 小于1024px） */
@media screen and (max-width:1024px){}
/* 小屏幕（平板, 大于等于 992px) */
@media screen and (max-width:992px){}
/* 小屏幕（ipad竖版，小于 768px）*/
@media screen and (max-width: 768px){}
/* 小屏幕（手机，小于 640px）*/
@media(max-width: 640px){}
